<div class="GoodsCategoryWrap">
  <ul id="goodscat_<{$widgets_id}>_tree">
    <{foreach from=$data item=parent key=parent_id}>
    <li class="e-cat-depth-1" >
    <p nuid='<{$parent_id}>'><a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$parent_id}>"><{$parent.label}></a></p>
    <{if $parent.sub && $setting.showCatDepth_default == '2'}>
    <ul>
      <li class="e-cat-depth-2">
      <table>
        <{counter start=1 assign="result" print=false }>

        <{if $setting.devide neq 0 }>

        <{foreach from=$parent.sub item=child key=childId}>
        <{if ($result mod $setting.devide) eq 1 }>
        <tr>
          <td>
            <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a><{$setting.page_devide}></td>
          <{elseif ($result mod $setting.devide) eq 0}>
          <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a>  <{$setting.page_devide}></td>
        </tr>
        <{else}>
        <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a>  <{$setting.page_devide}></td>
        <{/if}>
        <{counter assign="result" print=false }>
        <{/foreach}>

        <{/if}>

      </table>
      </li>
    </ul>

    <{elseif $parent.sub && ($setting.showCatDepth_default == '3')}>
    <ul>
      <{foreach from=$parent.sub item=child key=childId}>
      <li class="e-cat-depth-2">
      <p nuid='<{$childId}>'><a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$childId }>"><{$child.label}></a></p>
      <{if $child.sub && ($setting.showCatDepth_default == '3')}>
      <ul>
        <li class="e-cat-depth-3">
        <table>
          <{counter start=1 assign="result" print=false }>

          <{if $setting.devide neq 0 }>

          <{foreach from=$child.sub item=gChild key=gChildId}>
          <{if ($result mod $setting.devide) eq 1 }>
          <tr>
            <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$gChildId }>"><{$gChild.label}></a><{$setting.page_devide}></td>
            <{elseif ($result mod $setting.devide) eq 0}>
            <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$gChildId }>"><{$gChild.label}></a><{$setting.page_devide}></td>
          </tr>
          <{else}>
          <td> <a href="<{link app=b2c ctl=site_gallery act=$setting.view arg0=$gChildId }>"><{$gChild.label}></a>  <{$setting.page_devide}></td>
          <{/if}>
          <{counter assign="result" print=false }>
          <{/foreach}>

          <{/if}>

        </table>
        </li>
      </ul>
      <{/if}>
      </li>
      <{/foreach}>
    </ul>
    <{/if}>
    </li>
    <{/foreach}>
  </ul>
</div>
<script>
withBroswerStore(function(status){
  var gct=$('goodscat_<{$widgets_id}>_tree');
  var depthroots=gct.getElements('li');
  var synState=function(update){
    status.get('gct-state',function(st){
      var st=JSON.decode(st)||[];
      if(update){
        var ul=update.getParent('li').getElement('ul');
        if(!ul)return;
        if(ul.style.display!='none'){
          st.include(update.get('nuid'));
          }else{
          st.erase(update.get('nuid'));
        }
        return status.set('gct-state',st);
      }
      var handles=$$('#goodscat_<{$widgets_id}>_tree p[nuid]');
      handles.each(function(p,i){
        var ul=p.getParent('li').getElement('ul');
        if(!ul)return;
        if(st.contains(p.get('nuid'))){
          ul.show();
          if(p.getElement('span'))
          p.getElement('span').addClass('show').set('html','-');
          }else{
          ul.hide();
          if(p.getElement('span'))
          p.getElement('span').removeClass('show').set('html','+');
        }
      });
    });
  };
  var getHandle=function(depth,sign){
    depth=depth.getElement('p[nuid]');
    var span=new Element('span');
    if(!sign){
      span.set('html','&nbsp;').addClass('nosymbols').inject(depth,'top');
      return depth
    }
    span.set('html','&nbsp;').addClass('symbols').inject(depth,'top');
    return depth;
  };
  depthroots.each(function(root,index){
    var depth2=root.getElement('ul');
    if(depth2){
      var handle=getHandle(root,true);
      handle.addEvent('click',function(e){
        if(depth2.style.display!='none'){
          depth2.style.display='none';
          this.getElement('span').addClass('show').set('html','-');
          }else{
          depth2.style.display='';
          this.getElement('span').removeClass('show').set('html','+');
        }
        synState(this);
      });
      synState();
    }
  });
});
</script>
